<template>
	<view class="content">
		<view class="top top-bar">
			<view class="top-left">
				<view class="icon iconfont icon-fanhui" @click="goback()"></view>
				<image class="avartar" :src="contentInfo.account.head"></image>
				<view class="nickname">{{contentInfo.contentAuthor}}</view>
			</view>
			<view class="top-right">
				<view class="subscribe">关注</view>
				<view class="icon iconfont icon-zhuanfa"></view>
			</view>
		</view>
		<view class="content-panel">
			<image :src="imageServer+contentInfo.contentImg"  mode="widthFix"></image>
			<view class="content-text">{{contentInfo.contentText}}</view>
			<view class="content-time">{{(contentInfo.contentTime.replace("T"," ")).substring(0,16)}}</view>
		</view>
		<view class="btn-generator" @click="gotomakeimage(contentInfo)">制作海报</view>
		<view class="bottom-bar">
			<view class="comment box">
				<view class="icon iconfont icon-xiepinglun"></view>
				<input type="text" placeholder="说点什么...">
			</view>
			<view class="number box">
				<view class="icon iconfont icon-shoucang1"></view>
				<view class="number">{{contentInfo.contentPraiseCount>10000?(contentInfo.contentPraiseCount/10000).toFixed(2)+"万":contentInfo.contentPraiseCount}}</view>
			</view>
			<view class="number box">
				<view class="icon iconfont icon-shoucang2"></view>
				<view class="number">{{contentInfo.contentFavorateCount>10000?(contentInfo.contentFavorateCount/10000).toFixed(2)+"万":contentInfo.contentFavorateCount}}</view>
			</view>
			<view class="number box">
				<view class="icon iconfont icon-pinglun"></view>
				<view class="number">13</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				contentId:0,
				imageServer:'',
				contentInfo:{
					account:{},
					contentImg:'',
					contentTime:""
				}
			}
		},
		methods: {
			goback(){
				uni.navigateBack();
			},
			gotomakeimage(contentInfo){
				uni.navigateTo({
					url:'../createimage/createimage?image='+contentInfo.contentImg+"&text="+contentInfo.contentText
				})
			},
			loadContentInfo(){
				uni.showLoading({
					title:"加载中"
				})
				uni.request({
					url:this.serverUrl+"/api/content-infos/"+this.contentId,
					method:'GET',
					success:(result)=>{
						console.log("海报详情内容",result);
						if(result.statusCode==200){
							this.contentInfo=result.data;
						}else{
							uni.showToast({
								title:'获取数据失败',
								icon:"none"
							})
						}
						uni.hideLoading();
					}
				})
			}
		},
		onLoad(param) {
			this.contentId=param.id;
			this.loadContentInfo();
			this.imageServer=this.serverUrl;
		}
	}
</script>

<style>
	.content{
		width:750rpx;
		height:calc(100vh - 120px);
		padding:50px 0px;
		overflow-y: scroll;
		background-color: #efefef;
	}
	.top-bar{
		height:50px;
		position: fixed;
		top:0;
		width:750rpx;
		left:0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		z-index: 999;
		padding-bottom:10px;
	}
	.top-bar .top-left{
		display: flex;
		align-items: center;
	}
	.top-bar .avartar{
		height:36px;
		width:36px;
		border-radius: 50%;
		margin-right:20rpx;
	}
	.top-bar .icon-fanhui{
		font-size:22px;
		margin:0 15rpx;
	}
	.top-bar .nickname{
		color:#686868;
	}
	.top-bar .top-right{
		display: flex;
		align-items: center;
	}
	.top-bar .subscribe{
		padding:10rpx 20rpx;
		color:#FF2442;
		border:1px solid #FF2442;
		font-size:80%;
		border-radius: 30rpx;
		margin-right:20rpx;
	}
	.top-bar .icon-zhuanfa{
		font-size:22px;
		margin-right:20rpx;
	}
	.content-panel{
		display: flex;
		flex-direction: column;
		background-color: #fff;
	}
	.content-panel image{
		width:750rpx;
		height:auto;
	}
	.content-panel .content-text{
		font-size:105%;
		margin:10rpx 20rpx; 
		margin-top:25rpx;
	}
	.content-panel .content-time{
		color:#696969;
		font-size:90%;
		margin:5rpx 20rpx; 
	}
	.bottom-bar{
		height:50px;
		width:750rpx;
		display: flex;
		position:fixed;
		z-index: 999;
		background-color: #fff;
		bottom:0;
		left:0;
		justify-content: space-around;
		align-items: center;
	}
	.bottom-bar .box{
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.bottom-bar .box.comment{
		background-color:#eee;
		height:40px;
		border-radius: 40rpx;
		width:250rpx;
		padding:0 20rpx;
	}
	.box.comment .icon-xiepinglun{
		font-size:20px;
		margin-right:10rpx;
	}
	.box .icon{
		font-size:26px;
		margin-right:10rpx;
	}
	.btn-generator{
		padding:10px;
		width:60%;
		text-align: center;
		background-color: #FF2442;
		color: #fff;
		margin: 10px auto;
		border-radius: 10px;
	}
</style>
